<template>
  <div class="app-container">
    <el-container>
      <el-header><h3>作业范围分配</h3>
        <div class="buttons">
          <el-row v-if="edit">
            <el-button
              type="danger"
              @click="edit = false"
            >编辑</el-button>
          </el-row>
          <el-row v-else>
            <el-button
              type="danger"
              @click="submit"
            >提交</el-button>
            <el-button @click="edit = true,isDrwa = true">取消</el-button>
          </el-row>
        </div>
      </el-header>
      <el-main style="height:100vh">
        地区关键字: <el-input v-model="keyword" placeholder="请输入内容" style="width:200px;margin-bottom:15px" />
        <div v-if="!edit" class="buttons">
          <el-row v-if="isDrwa"> <el-button type="danger" @click="isDrwa = false;editstate = true">开始绘制</el-button></el-row>
          <el-row v-else> <el-button type="danger" @click="editstate = false;isDrwa = true">完成绘制</el-button> <el-button @click="editstate = false">删除围栏</el-button></el-row></div>
        <el-alert
          v-if="!edit"
          title="点击或拖动鼠标绘制作业范围，右击鼠标结束图形绘制，图形不可有交叉点。完成绘制后，点击提交按钮保存。每个机构仅可支持绘制一个作业范围"
          type="warning"
          show-icon
          :closable="false"
        />
        <baidu-map
          class="bm-view"
          :center="center"
          :zoom="zoom"
          :scroll-wheel-zoom="true"
          @ready="handler"
        >
          <bm-local-search :keyword="keyword" :auto-viewport="true" />
          <bm-polygon
            :path="polygonPath"
            stroke-color="#e15536"
            fill-color="#e15536"
            :fill-opacity="0.3"
            :stroke-opacity="0.4"
            stroke-style="dashed"
            :stroke-weight="2"
            :editing="editstate"
            @lineupdate="updatePolygonPath"
          />
        </baidu-map>

      </el-main>
    </el-container>
  </div>
</template>

<script>
import { saveArea } from '@/api/base'
import { userworkarea } from '@/api/user'
export default {
  name: 'EditWorkArea',
  components: {},
  props: [],
  data() {
    return {
      edit: true,
      isDrwa: true,

      // 地图数据
      center: { lng: 116.412732, lat: 39.911707 },
      zoom: 9,
      keyword: '',
      // 多边形编辑数据
      polygonPath: [

      ],
      // 提交时保存的作业范围
      workDate: {},
      // 处理后台返回的经纬度
      newArr: [],
      // 编辑的状态
      editstate: false,
      map: {}
      // 路由传递过来的id
      // id: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    // console.log(this.$route.query.rowData)
    // this.id = this.$route.query.rowData.userId

    this.getWorkArea()
  },
  mounted() {

  },
  updated() {

  },
  destroyed() {

  },
  activated() {

  },
  methods: {
    // 根据id获取快递员作业机构范围
    async getWorkArea() {
      const res = await userworkarea(this.$route.query.rowData.userId
      )
      this.center.lng = res.longitude
      this.center.lat = res.latitude
      this.workDate = res
      console.log(this.workDate)
      // console.log(this.polygonPath)
      if (this.workDate.polygon) {
        this.newArr = this.workDate.polygon.map(item => {
          return { lng: item.longitude, lat: item.latitude }
        })
        this.polygonPath = this.newArr
        const viewPointInfo = this.map && this.map.getViewport(this.newArr)
        this.center.lng = viewPointInfo.center.lng
        this.center.lat = viewPointInfo.center.lat
        this.zoom = viewPointInfo.zoom
      }
    },
    handler({ BMap, map }) {
      console.log(BMap, map)
      this.map = map
    },
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath()
      // console.log(e.target.getPath())
      this.workDate.polygon = e.target.getPath().map(item => {
        return { latitude: item.lat, longitude: item.lng }
      })
      // console.log(this.workDate.polygon)
    },
    // addPolygonPoint() {
    //   this.polygonPath.push({ lng: 116.404, lat: 39.915 })
    // },
    // 提交编辑后的作业范围
    async  submit() {
      console.log(this.workDate)
      await saveArea({ bid: this.workDate.bid, type: this.workDate.type, polygon: this.workDate.polygon })
      this.$message.success('保存成功')
      this.editstate = false
      this.edit = true
      this.workDate = {}
    }
  }
}

</script>
<style lang='scss' scoped>
.buttons {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
  background-color: #fff;
   margin-left: 20px;
}
.bm-view {
  width: 100%;
  height: 400px;
}
.el-main {
  background-color: #fff;
  margin-left: 20px;
}
</style>
